<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css" media="all" />
    <title>客户记账列表</title>
</head>
<body>
<div style="width: 95%;height: 95%;margin: auto">
    <div>
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <lable class="layui-form-label">会计:</lable>
                    <div class="layui-input-inline">
                        <select id="userId">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">公司:</lable>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="compName" />
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">服务日期:</lable>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="serviceTime" />
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">纳税类型:</lable>
                    <div class="layui-input-inline">
                        <select id="paymentType">
                            <option value="">请选择</option>
                            <option value="1">一般纳税人</option>
                            <option value="2">小规模纳税人</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">状态:</lable>
                    <div class="layui-input-inline">
                        <select id="state">
                            <option value="">请选择</option>
                            <option value="1" >有效</option>
                            <option value="2">无效</option>
                        </select>
                    </div>
                </div>
                <button class="layui-btn layui-icon layui-icon-search" type="button" id="searchBtn">搜索</button>
                <button class="layui-btn layui-btn-primary layui-icon layui-icon-refresh-1" type="reset" >重置</button>
            </div>
        </form>
    </div>
    <hr class="layui-bg-green"/>
    <div>
        <table id="dataTable" lay-filter="dataTableFilter"></table>
    </div>
</div>

<script type="text/html" id="headBtns">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="updateUser">
        <i class="layui-icon">&#xe642;</i> 更换会计
    </button>
</script>

<script type="text/html" id="rowBtns">
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-warm layui-btn-sm" lay-event="update">
            <i class="layui-icon">&#xe642;</i> 编辑
        </button>
        <button type="button" class="layui-btn layui-btn layui-btn-sm" lay-event="using">
            <i class="layui-icon">&#x1005;</i> 启用
        </button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="addPayMent">
            <i class="layui-icon">&#xe65e;</i> 缴费
        </button>
    </div>
</script>

<script type="text/html" id="editTpl">
    <div style="margin-top: 20px;margin-left: 20px">
        <form class="layui-form layui-form-pane" lay-filter="editFormFilter">
            <%---------------------------------1-----------------------------------------------%>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <lable class="layui-form-label">公司:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="compName" />
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">信用代码:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="compCode"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">帐套号:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="compAccount"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">银行名称:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="bankName"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">银行账户:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="bankAccount"/>
                    </div>
                </div>
            </div>
            <%---------------------------------2-----------------------------------------------%>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <lable class="layui-form-label">社保人数:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="socialNum"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">社保账户:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" placeholder="账号/密码" name="socialAccount"/>
                    </div>
                </div>

                <div class="layui-inline">
                    <lable class="layui-form-label">注册日期:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="compCreateTime" id="editCompCreateTime"/>
                    </div>
                </div>

                <div class="layui-inline">
                    <lable class="layui-form-label">工商所:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="compIcb"/>
                    </div>
                </div>


                <div class="layui-inline">
                    <lable class="layui-form-label">法人:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="legalName"/>
                    </div>
                </div>
            </div>
            <%--------------------------------3------------------------------------------------%>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <lable class="layui-form-label">法人电话:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" lay-verify="phone" name="legalPhone"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">联系人:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="contacts"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">联系人电话:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" lay-verify="phone" name="contactsPhone"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">区属:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <select name="compArea">
                            <option value="">请选择</option>
                            <option value="1">西湖</option>
                            <option value="2">江干</option>
                            <option value="3">滨江</option>
                            <option value="4">萧山</option>
                            <option value="5">下沙</option>
                            <option value="6">上城</option>
                            <option value="7">下城</option>
                            <option value="8">拱墅</option>
                            <option value="9">余杭</option>
                            <option value="10">五常</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">纳税类型:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <select name="paymentType">
                            <option value="">请选择</option>
                            <option value="1">一般纳税人</option>
                            <option value="2">小规模纳税人</option>
                        </select>
                    </div>
                </div>
            </div>
            <%--------------------------------4------------------------------------------------%>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <lable class="layui-form-label">国税账户:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" placeholder="账号/密码" name="taxAccount"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">税繁简度:</lable>
                    <%--1 简单  2  一般  3 复杂--%>
                    <div class="layui-input-inline" style="width: 140px">
                        <select name="taxType">
                            <option value="">请选择</option>
                            <option value="1">简单</option>
                            <option value="2">一般</option>
                            <option value="3">复杂</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">税专管员:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" lay-verify="phone" name="taxPhone"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">注册地址:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="regAddress"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">会计:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <select name="userId" id="editUserId">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
            </div>
            <%--------------------------------5------------------------------------------------%>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <lable class="layui-form-label">地址类型:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <select name="addressType">
                            <option value="">请选择</option>
                            <option value="1">租赁</option>
                            <option value="2">私人</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">注册资金:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="regCapital"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">实收资本:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="actualMoney"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">联系地址:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="contactAddress"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">单位座机:</lable>
                    <div class="layui-input-inline" style="width: 140px">
                        <input type="text" class="layui-input" name="compTel"/>
                    </div>
                </div>
            </div>
            <button id="submitBtn" lay-submit lay-filter="submitBtnFilter" style="display: none"></button>
        </form>
    </div>
</script>

<script type="text/html" id="editUserTpl">
    <div style="margin-top: 20px;margin-left: 25px">
        <form class="layui-form layui-form-pane" lay-filter="editFormFilter">
            <div class="layui-form-item">
                <lable class="layui-form-label">会计:</lable>
                <div class="layui-input-inline">
                    <select id="editUserId" name="userId" lay-verify="required" lay-reqText="请选择会计">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <button id="submitBtn" lay-submit lay-filter="submitBtnFilter" style="display: none"></button>
        </form>
    </div>
</script>

<script type="text/html" id="addPayMentTpl">
    <div style="margin-top: 20px;margin-left: 20px">
        <form class="layui-form layui-form-pane" lay-filter="editFormFilter">
            <div class="layui-form-item" style="width: 320px;display: inline-block;float: left">
                <div class="layui-inline">
                    <label class="layui-form-label">客户名称</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="custName" readonly="readonly" >
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">缴费时间</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" lay-verify="required" lay-reqText="缴费时间不能为空"  readonly="readonly" id="payTime" name="payTime">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">缴费金额</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" lay-verify="required|number" lay-reqText="缴费金额不能为空"   name="payMoney">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">缴费类型</label>
                    <div class="layui-input-inline">
                        <select lay-filter="typeFilter" name="type">
                            <option value="">请选择</option>
                            <option value="1">服务费</option>
                            <option value="2">年检费</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item"   style="width:320px;display:inline-block">
                <div class="layui-inline">
                    <label class="layui-form-label">缴费凭证</label>
                    <div class="layui-input-inline">
                        <img id="payImg" style="width: 190px;height: 160px;border: 1px #eeeeee solid" />
                        <button type="button" id="payImgBtn" style="display: none" />
                    </div>
                </div>
            </div>

            <div class="layui-form-item" id="serviceDiv" style="display: none">
                <div class="layui-inline">
                    <label class="layui-form-label">服务始时间</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="serviceBeginTime" id="serviceBeginTime" />
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">服务止时间</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="serviceEndTime" id="serviceEndTime" />
                    </div>
                </div>
            </div>

            <div class="layui-form-item" >
                <div class="layui-inline">
                    <label class="layui-form-label">缴费方式</label>
                    <div class="layui-input-inline">
                        <select  name="payType" lay-verify="required" lay-reqText="请选择缴费方式">
                            <option value="">请选择</option>
                            <option value="1">支付宝</option>
                            <option value="2">微信支付</option>
                            <option value="2">银行卡</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">流水号</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="payOrder" lay-verify="required" lay-reqText="请输入流水号">
                    </div>
                </div>
            </div>

            <div class="layui-form-item" >
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block" style="width: 515px;">
                    <textarea class="layui-textarea" name="info"></textarea>
                </div>
            </div>
            <button id="submitBtn" lay-submit lay-filter="submitBtnFilter" style="display: none"></button>
        </form>
    </div>
</script>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['table','jquery','layer','form','laydate','upload'],function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        laydate.render({elem:"#serviceTime"});
        function getAccountings() {
            var data = null;
            $.ajax({
                url:"${pageContext.request.contextPath}/comp/user/getAccountings.do",
                async :false,
                success:function (rs) {
                    if(rs.code != 200){
                        layer.msg(rs.msg);
                        return false;
                    }
                    data = rs.data;
                }
            });
            return data;
        }

        function  renderSelect(id,data) {
            var select = $(id);
            var html = "";
            $.each(data,function (index,value) {
                html = html + "<option value='"+value.id+"'>"+value.name+"</option>";
            })
            select.append(html);
            form.render("select");
        }

        function initAccounting(id,param) {
            var data = getAccountings(param);
            renderSelect(id,data);
        }

        initAccounting("#userId");

        var t = table.render({
            id:"dataTableId",
            elem:"#dataTable",
            toolbar:'#headBtns',
            page:true,
            height: 450,
            url:'${pageContext.request.contextPath}/bussi/customer/page.do',
            response:{
                "statusCode": 200
            },
            parseData:function(rs){
                if (rs.code != 200){
                    layer.msg(rs.msg);
                    return false;
                }
                return {
                    "code": rs.code, //解析接口状态
                    "msg": rs.msg, //解析提示文本
                    "count": rs.data.count, //解析数据长度
                    "data": rs.data.data //解析数据列表
                }
            },
            cols:[[
                {type:'checkbox'},
                {field:'id',title:'ID',width:80},
                {field:'compAccount',title:'帐套号'},
                {field:'compName',title:'公司名'},
                {field:'compCode',title:'信用代码'},
                {field:'serviceEndTime',title:'服务时间',width:140,templet:function (d) {
                        if(d.serviceEndTime == null || d.serviceEndTime == ''){
                            return "<b style='color: red'>未缴纳</b>"
                        }
                        var date = new Date();
                        var nowTime = date.getTime();
                        var serviceTime = d.serviceEndTime;
                        debugger
                        var serviceEndTime = serviceTime.replace(/-/g,"/");
                        var time2 = new Date(serviceEndTime).getTime();
                        var times = (time2 - nowTime)/1000/60/60/24;
                        if(times < 0){
                            return "<b style='color: red'>"+d.serviceEndTime+"</b>";
                        }
                        if(times > 30){
                            return "<b style='color: green'>"+d.serviceEndTime+"</b>";
                        }
                        return  "<b style='color: yellowgreen'>"+d.serviceEndTime+"</b>";
                    }},
                {field:'compCheckFeeState',title:'年检费用',templet:function (d) {
                        if (d.compCheckFeeState == 1){
                            return "<b style='color:green'  >已缴</b>";
                        }else if (d.compCheckFeeState == 2){
                            return "<b style='color:red'>未缴</b>";
                        }else{
                            return "<b >其它</b>";
                        }
                    }},
                {field:'contacts',title:'联系人',width:120},
                {field:'contactsPhone',title:'联系电话',width:120},
                {field:'userName',title:'财务负责人'},
                {title:'操作',toolbar:'#rowBtns',width:240,fixed:"right"},
            ]],
        });

        $("#searchBtn").click(function () {
            var userId = $("#userId").val();
            var compName = $("#compName").val();
            var serviceEndTime = $("#serviceTime").val();
            var paymentType = $("#paymentType").val();
            var state = $("#state").val();
            t.reload({
                where:{
                    userId:userId,
                    compName:compName,
                    serviceEndTime:serviceEndTime,
                    paymentType:paymentType,
                    state:state,
                    page:1
                }
            });
        });

        table.on("toolbar(dataTableFilter)",function (d) {
            var event = d.event;
            if (event == 'add'){
                add();
            } else if (event == 'updateUser'){
                updateUser();
            }
        });

        function add() {
            layer.open({
                title:'编辑',
                type:1,
                content:$("#editTpl").html(),
                area:['860px','500px'],
                success:function (layero,index) {
                    initAccounting("#editUserId");
                    laydate.render({elem:"#editCompCreateTime",position:"fixed",zIndex:99999999});
                    form.render();
                    form.on('submit(submitBtnFilter)',function (d) {
                        //查找到选择的会计的字符串
                        var data = d.field;
                        //获取到选择的会计的名称
                        var userName = $("#editUserId").find("option:selected").text();
                        //为提交的参数 设置会计的名称
                        data.userName = userName;
                        //更新表格
                        updateTable("bussi/customer/add.do",data,index);
                        return false;
                    });
                },
                btn:['确认','取消'],
                btnAlign:'c',
                yes:function (index,layero) {
                    $("#submitBtn").click();
                }
            })
        }

        function updateUser() {
            var checkStatus = table.checkStatus('dataTableId');
            var rowsData = checkStatus.data;
            if(rowsData == null || rowsData.length == 0){
                layer.msg("请勾选需要更改的数据");
                return false;
            }
            var param = "";
            $.each(rowsData,function (index,value) {
                param  = param + "custId=" + value.id + "&";
            });
            layer.open({
                title:'编辑',
                type:1,
                content:$("#editUserTpl").html(),
                area:['350px','300px'],
                success:function (layero,index) {
                    initAccounting("#editUserId");
                    form.render();
                    form.on('submit(submitBtnFilter)',function (d) {
                        var data = d.field;
                        var userName = $("#editUserId").find("option:selected").text();
                        param = param + "userId="+data.userId+"&userName="+userName;
                        //更新表格
                        updateTable("bussi/customer/updateUser.do?"+param,{},index);
                        return false;
                    });
                },
                btn:['确认','取消'],
                btnAlign:'c',
                yes:function (index,layero) {
                    $("#submitBtn").click();
                }
            })
        }

        table.on("tool(dataTableFilter)",function (d) {
            var event = d.event;
            if (event == 'update'){
                update(d.data);
            } else if (event == 'using'){
                using(d.data);
            } else if (event == 'addPayMent'){
                addPayMent(d.data);
            }
        });

        function addPayMent(data) {
            layer.open({
                title:'编辑',
                type:1,
                content:$("#addPayMentTpl").html(),
                area:['680px','520px'],
                success:function (layero,index) {
                    form.val("editFormFilter",{'custName':data.compName});
                    laydate.render({elem:"#payTime"});
                    laydate.render({elem:"#serviceBeginTime"});
                    laydate.render({elem:"#serviceEndTime"});
                    form.on('select(typeFilter)', function(select) {
                        var v =  select.value;
                        if (v == 1){
                            $("#serviceDiv").show();
                        }else{
                            $("#serviceDiv").hide();
                        }
                    });
                    form.render();
                    var uploadObj =  upload.render({
                        elem:"#payImg",
                        url:"${pageContext.request.contextPath}/bussi/payment/addPayMent.do",
                        auto:false,
                        bindAction:"#payImgBtn",
                        field:"payImgFile",
                        size:2000,
                        choose:function (obj) {
                            //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                            obj.preview(function(index, file, result){
                                $("#payImg").attr("src",result);
                            });
                        },
                        done: function(rs, i, upload){
                            if(rs.code != 200){
                                layer.msg(rs.msg);
                                return false;
                            }
                            layer.msg(rs.msg);
                            layer.close(index);
                        }
                    });
                    form.on('submit(submitBtnFilter)',function (d) {
                        var formData = d.field;
                        formData.custId = data.id;
                        uploadObj.config.data = formData;
                        $("#payImgBtn").click();
                        return false;
                    });
                },
                btn:['确认','取消'],
                btnAlign:'c',
                yes:function (index,layero) {
                    var imgFile = $("#payImg").attr("src");
                    if(imgFile == null || imgFile == ""){
                        layer.msg("请上传凭证");
                        return false;
                    }
                    $("#submitBtn").click();
                }
            })
        }

        function update(data) {
                layer.open({
                    title:'编辑',
                    type:1,
                    content:$("#editTpl").html(),
                    area:['860px','500px'],
                success:function (layero,index) {
                    initAccounting("#editUserId");
                    laydate.render({elem:"#editCompCreateTime",position:"fixed",zIndex:99999999});
                    form.val("editFormFilter",data);
                    form.render();
                    form.on('submit(submitBtnFilter)',function (d) {
                        var param = d.field;
                        param.id = data.id;
                        var userName = $("#editUserId").find("option:selected").text();
                       param.userName = userName;
                        updateTable("bussi/customer/update.do",param,index);
                        return false;
                    });
                },
                btn:['确认','取消'],
                btnAlign:'c',
                yes:function (index,layero) {
                    $("#submitBtn").click();
                }
            })
        }

        function using(data) {
            layer.confirm("确定要启用数据吗？",function (index) {
               updateTable("bussi/customer/using.do",{id:data.id},index);
            });
        }

        function  updateTable(url,data,index) {
            $.post("${pageContext.request.contextPath}/"+url,data,function (rs) {
                if (rs.code != 200){
                    layer.msg(rs.msg);
                    return false;
                }
                layer.msg(rs.msg);
                $("#searchBtn").click();
                layer.close(index);
            });
        }

    })
</script>

</body>
</html>
